<template>
  <div class="box abnormal-equipment">
    <div class="header">
      <div class="title">异常设备监控</div>
      <el-icon @click="handleMore"><MoreFilled /></el-icon>
    </div>
    <el-scrollbar v-if="listData.length" class="scrollbar body">
      <el-table
        :data="listData"
        fit
        highlight-current-row
        style="width: 100%"
        :header-cell-style="{
          padding: '7px 0 6px',
          background: '#EFF0F2',
          'font-weight': '400',
          'text-align': 'left',
          color: '#333333'
        }"
        :cell-style="{
          padding: '15px 0',
          'text-align': 'left',
          color: '#999999'
        }"
      >
        <el-table-column label="故障时间" width="160px">
          <template #default="scope">
            <span>{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="详细地址" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.detailedAddress }}</span>
          </template>
        </el-table-column>
        <el-table-column label="故障类别" width="120px">
          <template #default="scope">
            <span>{{ scope.row.repairContent }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <!-- TODO：一开始显示加载中 -->
    <div v-else class="empty">
      <img src="@/assets/images/empty.png"  alt=""/>
      <div class="tips">暂无数据</div>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
import {MoreFilled} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
// 定义变量
const router = useRouter();
const listData = ref([
        {
          contactPhone: "13800138000",
          createBy: "user1",
          createTime: "2024-11-08 17:27:40",
          detailedAddress: "北京市朝阳区某小区1号楼1单元101室",
          detailedContent: "电视无法开机，电源线已检查无误。",
          id: 1,
          remark: null,
          repairContent: "电源损坏",
          repairContentId: 1,
          repairStatus: 0,
          updateBy: "user1",
          updateTime: "2024-11-08 17:27:40",
        },
        {
          contactPhone: "1500015001",
          createBy: "null",
          createTime: "2024-11-09 11:00:07",
          detailedAddress: "4488",
          detailedContent: "电源线被老鼠啃了",
          id: 5,
          remark: null,
          repairContent: "电源损坏",
          repairContentId: 1,
          repairStatus: 0,
          updateBy: "null",
          updateTime: "2024-11-09 11:00:23",
        },
    ]);

// 点击更多
const handleMore = () => {
  router.push({ path: 'vm/machine' });
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.abnormal-equipment {
  display: flex;
  flex-direction: column;
  height: calc((100vh - 120px) * 0.4);
  min-height: 353px;
  background: #ffffff;
  border-radius: 20px;

  .more {
    color: $--color-primary;
    cursor: pointer;
  }

  .empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .tips {
      margin-top: 25px;
      color: #20232a;
      font-size: 14px;
    }
  }

  .body {
    flex: 1;
    margin-top: 20px;
  }
}
</style>
